<template>
  <header class="nav flex between item-center shadow">
    <div>线上教育培训考试平台</div>
    <ul class="flex items between">
        <li v-for="(item, i) of navs" :key="i" @click="clickNav(item.path)" :class="item.current && 'current'">
            <span class="iconfont" v-html="item.icon"></span>
            <span>{{ item.name }}</span>
        </li>
    </ul>
    <div class="flex searchbox">
        <!-- <el-input placeholder="请输入搜索内容" size="mini" suffix-icon="el-icon-search" v-model="keyword"></el-input> -->
        <el-button type="primary" size="mini" round v-if="$store.state.user" @click="$router.push('/info/index')">我的主页</el-button>
        <el-button type="primary" size="mini" round v-else @click="handleLogin">登录</el-button>
    </div>
  </header>
</template>

<script>
import { getUser } from '@/utils/auth'
export default {
    data() {
        return {
            navs: [
                {name: '首页', icon: '&#xe729;', path: '/', current: true},
                {name: '课程', icon: '&#xe601;', path: '/course', current: false},
                {name: '通知咨询', icon: '&#xe660;', path: '/notice', current: false},
                // {name: '登录', icon: '&#xebce;', path: '/login', current: false},
                // {name: '注册', icon: '&#xe71c;', path: '/register', current: false}
            ],
            keyword: '',
            // user: null
        }
    },
    created() {
        const user = getUser()
        if (user) {
            this.$store.dispatch('setUser',user)
        }
    },  
    methods: {
        clickNav(path) {
            this.$router.push(path)
            this.navs.forEach(nav => nav.current = path === nav.path)
        },
        handleLogin() {
            // this.user = {id: 1, name: '张三'}
            this.$router.push('/login')
        }
    },
    watch: {
        $route: {
            handler: function(val, oldVal){
                this.clickNav(val.path)
            },
            deep: true
        }
        },
}
</script>

<style lang="scss" scoped>
.nav {
    position: fixed;
    top: 0;
    z-index: 999;
    width: 100%;
    height: 50px;
    padding: 0 50px;
    min-width: 1200px;
    background: #fff;
    .items {
        li {
            margin-right: 20px  ;
            cursor: pointer;
        }
    }
    .searchbox {
        .el-input {
            margin-right: 10px;
        }
    }
}
.current {
    font-weight: 600;
    color: var(--color-primary);
}
.iconfont {
    margin-right: 5px;
}
</style>
